<template>
  <div class="news">
    <div class="news_head">
      <p class="content4 color1 fontBold line25" v-if="data.active_suatus == 1">
        <van-tag style="height:19px;width:55px;justify-content: center;" class="tagleft" color="#FF7A1F" type="primary">
          报名中
        </van-tag>{{ data.title }}
      </p>
      <p class="content4 color1 fontBold line25" v-if="data.active_suatus == 2 || data.active_suatus == 3">
        <van-tag style="height:19px;width:55px;justify-content: center;" class="tagleft" color="#85898c" type="primary">
          {{ data.active_suatus == 2 ? '已截止' : '已结束' }}
        </van-tag>{{ data.title }}
      </p>
      <div class="flex justify_between align_center font400 color6 content2">
        <p>报名截止：{{ data.deadline }}</p>
      </div>
      <div class="activeImg">
        <img :src="data.dpic">
      </div>
      <div class="activeTime">
        <p class="font400 color3 content3 line20 flex align_center">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shijian" />
          </svg>
          <text style="flex: 1">
            活动时间：{{ data.active_time }}
          </text>
        </p>
        <p class="font400 color3 content3 line20 flex align_center">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-didian" />
          </svg>
          <text style="flex: 1">
            活动地点：{{ data.address }}
          </text>
        </p>

        <!-- 付费字段 -->
        <p class="font400 color3 content3 line20 flex align_center" v-if="data.same_max_num">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#custom-icon-ren" />
          </svg>
          <text style="flex: 1">
            报名限制：同一公司最多报名<span>{{ data.same_max_num }}</span>人
          </text>
        </p>

        <div style="margin-top: 10px" class="font400 color3 content3 line20 flex "
          v-if="data.price_list">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#custom-icon-qian1" />
          </svg>
          <text style="flex: 1" class="flex">
            费用报名：
          <div style="margin: 0;color: #ef7726;flex: 1">
            <!-- <div style="margin: 0;">{{ data.price_text }}</div> -->
            <div style="margin-top: 0;">
              <div :style="index ?'margin-top: 5px;' : 'margin-top: 0px;'" v-for="(item , index) in data.price_text" :key='item'>
                <div  style="margin-top: 0;"> {{ item }}</div>
              </div>
            </div>
            <div style="margin: 5px 0 0 0px;" v-for="(item, index) in data.price_list" :key="index">
              <span>{{ item.name }}：</span><span style="font-weight:bold;">¥{{ item.price }}人</span>
            </div>
          </div>
          </text>
        </div>

        <!-- 付费字段 -->
        <!-- <p class="font400 color3 content3 line20 flex align_center">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-didian" />
          </svg>
          报名费用：<span>{{ data.address }}</span>
        </p> -->
      </div>
    </div>
    <div class="news_content content3 color3 font400" v-html="data.content" />
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div class="font400 content3 color4" @click="back">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui" />
        </svg>
        <p class="content2 font400 color3">
          返回
        </p>
      </div>
      <div class="font400 content3 color4" @click="share">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fenxiang" />
        </svg>
        <p class="content2 font400 color3">
          分享
        </p>
      </div>
      <div @click="submit" class="agree font400 content3 color4" v-if="data.active_suatus == 1">
        报名
      </div>
      <div class="cancle font400 content3 color4" v-if="data.active_suatus == 2 || data.active_suatus == 3">
        {{ data.active_suatus == 2 ? '已截止' : '已结束' }}
      </div>
    </div>
  </div>
  <van-dialog v-model:show="showNum" :title="newData.title" show-cancel-button confirm-button-color="#FF7A1F"
    confirm-button-text="确定" @confirm="confirm" :beforeClose="beforeClose">
    <div>
      <div class="boxs">
        <van-radio-group v-model="newData.checked" v-if='data.price_list.length && data.price_list[0].type == 1'>
          <van-radio :name="item.id" style="margin-bottom: 10px;" v-for="item in data.price_list" :key="item">
            <div>{{ item.name }} <span style="font-weight:bold;margin-left:10px">¥{{ item.price }}/人</span></div>
          </van-radio>
        </van-radio-group>
        <div v-else>
          <div style="margin-bottom: 10px;">
            报名费用：
          </div>
          <div style="margin-bottom: 10px;" v-for="item in data.price_text" :key='item'>
            {{ item }}
          </div>
          <div style="margin-bottom: 10px;" v-for="item in data.price_list" :key="item">
            <div>{{ item.name }} <span style="font-weight:bold;margin-left:10px">¥{{ item.price }}/人</span></div>
          </div>
        </div>
        <div class="flex justify_between align_center" style="margin-top: 10px;">
          <p class="font400 content3 color3">
            报名人数
          </p>
          <van-stepper v-model="value" input-width="40px" button-size="32px" />
        </div>
      </div>
    </div>
  </van-dialog>
  <Loading :visible="visible" :share-img="shareImg" @closeLoading="closeLoading" />
  <!-- 重复订单 -->
  <van-dialog v-model:show="orderStatus" width="90%" title="你有未完成的重复订单" confirm-button-text="继续报名"
    confirm-button-color="#FF7A1F" show-cancel-button @confirm="confirmOrder">
    <div class="order">
      <div class="orderBox">
        <!-- <p class="fontBold color1 content4 title">
          你有未完成的重复订单
        </p>-->
        <div class="orderInfo" v-for="(item, index) in orderLists.list" :key="index">
          <div class="orderInfoBox">
            <p class="line20">
              <van-tag style="height:19px;width:55px;justify-content: center;" class="tagleft" color="#FF7A1F"
                type="primary">
                审核中
              </van-tag>
              <span class="content3 fontBold color3">{{ item.title }}</span>
            </p>
            <p class="moeny flex align_center justify_between">
              <span class="content2 font400 color6">{{ item.create_time }}</span>
              <span class="content3 font400 color1">￥{{ item.price }}</span>
            </p>
          </div>
          <div class="confin flex align_center justify_between">
            <div @click="cancle(item.id)" class="confinItem cancle font400 content2 color3">
              取消订单
            </div>
            <div @click="see" class="confinItem see font400 content2 color2">
              查看订单
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-dialog>
</template>

<script setup lang="ts">
import {
  ref, defineAsyncComponent,
  reactive
} from 'vue'
import { Toast } from 'vant'
import { useRoute, useRouter } from 'vue-router'
// import { useStore } from 'vuex'
import { activityDetail, activityShare, chooseSignNum, orderCancel, orderList } from '@/api/index'
const Loading = defineAsyncComponent(() => import('@/components/Loading/index.vue'))
const router = useRouter()
const route = useRoute()
// const store = useStore()
const showNum: any = ref(false)
const data: any = ref({})
const visible: any = ref(false)
const shareImg: any = ref('')
const value: any = ref(1)
const orderStatus: any = ref(false)
const orderLists: any = ref([])

const newData = reactive({
  title: '请选择报名人数',
  checked: ''
})

const getData = async () => {
  if (sessionStorage.getItem('goBackUrl')) {
    sessionStorage.removeItem('goBackUrl')
  }
  data.value = await activityDetail({ active_id: route.query.id })
  data.value.price_text = data.value.price_text.split('，')
  console.log(data.value.price_text, 'data.value')
  // store.dispatch('fetchUserInfo')
}

getData()

// const getSuccess = () => {
//   if (route.query.success) {
//     Dialog.alert({
//       title: '温馨提示',
//       message: '报名成功',
//       confirmButtonColor: '#FF7A1F'
//     }).then(() => {
//       router.replace({ path: '/find/activity', query: { id: route.query.id } })
//     })
//   }
// }

// getSuccess()

const confirmOrder = () => {
  // confirm()
  orderStatus.value = false
  showNum.value = true
}

const cancle = async (id: any) => {
  console.log('99999999999999999999')
  try {
    await orderCancel({ order_id: id })
    getData()
    handleGetOrderList()
    Toast('取消成功')
  } catch (error: any) {
    Toast(error.message)
  }
}

const see = async (id: any) => {
  router.push('/otherServices/order?back=orderList')
}

const back = () => {
  // console.log(store.state.from.path)
  router.replace('/find')
  // if (store.state.from.path === '/find/free' || store.state.from.path === '/userCenter/order') {
  // } else if (store.state.from.path !== '/') {
  //   router.replace('/find')
  // } else {
  //   router.replace('/find')
  // }
}

const beforeClose = (action: any) => {
  console.log(action, 'action')
  if (action === 'confirm') {
    if (data.value.price_list.length > 0 && data.value.price_list[0].type === 1) {
      if (!newData.checked) {
        Toast('请选择票种')
        return false
      }
    } else {
      console.log('11')
      return true
    }
  } else {
    return true
  }
}

const confirm = async () => {
  try {
    console.log(newData, 'newData')
    if (data.value.price_list.length > 0 && data.value.price_list[0].type === 1) {
      if (!newData.checked) {
        return false
      }
    }

    const res: any = await chooseSignNum({ active_id: route.query.id, sign_num: value.value })
    router.push({ path: '/find/free', query: { price_id: newData.checked, active_id: route.query.id, type: res.type, sign_num: value.value, title: data.value.title, deadline: data.value.deadline, activeType: data.value.type } })
    sessionStorage.removeItem('user_ids')
  } catch (error: any) {
    Toast(error.message)
  }
}

const handleGetOrderList = async () => {
  orderLists.value = await orderList({ pay_type: 2, type: 1, paid_id: route.query.id })
}

const submit = async () => {
  console.log(data.value.price_list && data.value.price_list.length > 0)
  if (data.value.price_list && data.value.price_list.length > 0) {
    showNum.value = true
    if (data.value.price_list.length && data.value.price_list[0].type === 1) {
      newData.title = '选择报名票种及数量'
    } else {
      newData.title = '选择报名数量'
    }
  } else {
    await handleGetOrderList()
    if (orderLists.value.list.length > 0) {
      orderStatus.value = true
    } else {
      showNum.value = true
    }
  }
  // router.push('/find/free')
}

const closeLoading = async () => {
  visible.value = false
}
const share = async () => {
  try {
    visible.value = true
    await activityShare({ active_id: route.query.id, web_url: encodeURIComponent(window.location.href) })
    shareImg.value = `${import.meta.env.VITE_API_BASEURL}v1/find_activity/share?active_id=${route.query.id}&web_url=${encodeURIComponent(window.location.href)}`
  } catch (error: any) {
    Toast(error.message)
  }
}

</script>

<style lang="less" scoped>
.order {

  // width: 315px;
  // height: 308px;
  // background: #ffffff;
  // box-shadow: 0px 0px 7px 0px rgba(22, 12, 6, 0.1);
  // border-radius: 10px;
  .orderBox {
    padding: 15px;
    height: 200px;
    overflow: auto;

    .title {
      text-align: center;
    }

    .orderInfo {
      // width: 286px;
      background: #f7f7f7;
      border-radius: 5px;
      margin-top: 20px;

      .orderInfoBox {
        padding: 15px;

        .tagleft {
          margin-right: 5px;
        }

        .moeny {
          margin-top: 20px;
        }
      }
    }
  }

  .confin {
    border-top: 1px solid #cacaca;

    .confinItem {
      width: 50%;
      text-align: center;
      height: 48px;
      line-height: 48px;
      border-right: 1px solid #cacaca;
    }

    .confinItem:last-child {
      border-right: 0;
    }
  }
}

.news {
  padding: 20px 15px 80px;

  .news_head {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #cacaca;

    div {
      margin-top: 15px;
    }

    .tagleft {
      margin-right: 7px;
    }

    .activeImg {
      width: 100%;
      // height: 187px;

      img {
        max-width: 100%;
        border-radius: 10px;
      }
    }

    .activeTime {

      p:nth-child(2),
      p:nth-child(3) {
        margin-top: 10px;
      }

      p {
        span {
          color: #ef7726;
          font-weight: bold;
        }
      }

      .icon {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }
  }

  .news_content {
    line-height: 25px;

    ::v-deep hr,
    ::v-deep table {
      width: 100% !important;
      object-fit: contain;
      margin: auto !important;
    }

    ::v-deep img {
      max-width: 100% !important;
      object-fit: contain;
      margin: auto !important;
    }
  }
}

.boxs {
  padding: 30px;
}

.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);

  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;

    .agree {
      width: 189px;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }

    .cancle {
      width: 189px;
      height: 44px;
      background: #85898c;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }

    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}

@media (min-width: 750px) {
  .order {

    // width: 315px;
    // height: 308px;
    // background: #ffffff;
    // box-shadow: 0px 0px 7px 0px rgba(22, 12, 6, 0.1);
    // border-radius: 10px;
    .orderBox {
      padding: 15px;
      height: 200px;
      overflow: auto;

      .title {
        text-align: center;
      }

      .orderInfo {
        // width: 286px;
        background: #f7f7f7;
        border-radius: 5px;
        margin-top: 20px;

        .orderInfoBox {
          padding: 15px;

          .tagleft {
            margin-right: 5px;
          }

          .moeny {
            margin-top: 20px;
          }
        }
      }
    }

    .confin {
      border-top: 1px solid #cacaca;

      .confinItem {
        width: 50%;
        text-align: center;
        height: 48px;
        line-height: 48px;
        border-right: 1px solid #cacaca;
      }

      .confinItem:last-child {
        border-right: 0;
      }
    }
  }

  .news {
    padding: 20px 15px 80px;

    .news_head {
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #cacaca;

      div {
        margin-top: 15px;
      }

      .tagleft {
        margin-right: 7px;
      }

      .activeImg {
        width: 100%;
        // height: 187px;

        img {
          max-width: 100%;
          border-radius: 10px;
        }
      }

      .activeTime {
        p:last-child {
          margin-top: 10px;
        }

        .icon {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
      }
    }

    .news_content {
      line-height: 25px;
    }
  }

  .boxs {
    padding: 25px;
  }

  .fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);

    .footer_btn {
      padding: 0 30px;
      height: 100%;
      text-align: center;

      .agree {
        width: 189px;
        height: 44px;
        background: #ff7a1f;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
      }

      .cancle {
        width: 189px;
        height: 44px;
        background: #85898c;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
      }

      .icon {
        width: 23px;
        height: 23px;
        margin-bottom: 2px;
      }
    }
  }
}
</style>
